<template>
  <div class="bank-card" @click="handleClick">
    <!-- 卡片顶部的渐变条 -->
    <div class="card-gradient"></div>

    <!-- 卡片内容区域 -->
    <div class="card-content">
      <!-- 卡片头部区域 -->
      <div class="card-header">
        <div class="bank-info">
          <el-tooltip class="item" effect="light" :content="bank.bankName" placement="top">
            <h3 class="bank-name">{{ bank.bankName }}</h3>
          </el-tooltip>
          <p class="bank-description">{{ bank.description || '暂无描述' }}</p>
        </div>
        <!-- 添加删除图标 -->
        <div class="delete-icon" @click.stop="showDeleteConfirm">
          <i class="fas fa-trash-alt"></i>
        </div>
      </div>

      <!-- 卡片统计信息区域 -->
      <div class="card-stats">
        <div class="stat">
          <div class="stat-value">{{ bank.totalQuestionNum || 0 }}</div>
          <div class="stat-label">题目数量</div>
        </div>
        <div class="stat">
          <div class="stat-value" :style="{ color: difficultyInfo.color }">
            {{ difficultyInfo.text }}
          </div>
          <div class="stat-label">平均难度</div>
        </div>
      </div>

      <!-- 卡片底部区域 -->
      <div class="card-footer">
        <div class="meta-item">
          <i class="fas fa-user"></i>
          <span>{{ userName }}</span>
        </div>
        <div class="meta-item">
          <i class="fas fa-calendar-alt"></i>
          <span>{{ formatDate(bank.createdAt) }}</span>
        </div>
        <button class="view-btn" @click.stop="viewBankQuestions">
          查看题目 <i class="fas fa-arrow-right"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
// 引入Vuex
import { mapState } from 'vuex';
export default {
  name: 'BankCard',
  props: {
    bank: {
      type: Object,
      required: true
    },
    isCreateCard: {
      type: Boolean,
      default: false
    },
    userName: {
      type: String,
      default: '默认用户'
    }
  },
  data() {
    return {
      showDeleteDialog: false,
      difficultyLevels: {
        1: { text: '非常简单', color: '#10B981' },
        2: { text: '非常简单', color: '#10B981' },
        3: { text: '简单', color: '#10B981' },
        4: { text: '简单', color: '#10B981' },
        5: { text: '中等', color: '#F59E0B' },
        6: { text: '中等', color: '#F59E0B' },
        7: { text: '较难', color: '#EF4444' },
        8: { text: '困难', color: '#EF4444' },
        9: { text: '非常困难', color: '#EF4444' },
        10: { text: '专家级', color: '#EF4444' }
      }
    }
  },
  computed: {
    ...mapState('question', ['banks']),
    difficultyInfo() {
      const level = this.bank.avgDiffculty || 0;
      // 处理难度等级为字符串的情况
      
      return this.difficultyLevels[level] || {
        text: '未设置',
        color: '#94A3B8',
        bgColor: '#F1F5F9'
      };
    },
    difficultyStyle() {
      return {
        color: this.difficultyInfo.color,
        backgroundColor: this.difficultyInfo.bgColor,
        border: `1px solid ${this.difficultyInfo.color}`
      };
    }
  },
  methods: {
    getDifficultyText(level) {
      const numLevel = parseInt(level);
      if (isNaN(numLevel)) return '未设置';
      return this.difficultyLevels[numLevel]?.text || '未设置';
    },
    getDifficultyColor(level) {
      return this.difficultyLevels[level]?.color || '#94A3B8';
    },
    getDifficultyStyle(level) {
      return {
        backgroundColor: this.getDifficultyColor(level),
        color: 'white'
      };
    },

    formatDate(dateString) {
      if (!dateString) return '未知'
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      }).replace(/\//g, '-')
    },
    handleDelete() {
      this.$emit('delete', this.bank);
      // 添加删除动画
      this.$el.style.transition = 'opacity 0.3s';
      this.$el.style.opacity = '0';
      setTimeout(() => {
        this.$el.remove();
      }, 300);
    },
    handleClick() {
      if (this.isCreateCard) {
        this.$emit('create')
      } else {
        this.$emit('view', this.bank)
      }
    },
    viewBankQuestions() {
      this.$emit('view', this.bank)
    },
    showDeleteConfirm(e) {
      e.stopPropagation()
      this.$emit('delete', this.bank); // 触发父组件的删除流程
    },
    confirmDelete() {
      this.$emit('delete', this.bank)
      this.showDeleteDialog = false
    },
    cancelDelete() {
      this.showDeleteDialog = false
    }
  }
}
</script>

<style lang="less" scoped>
// 颜色变量
@primary: #4361EE;
@primary-light: #A5B4FC;
@primary-lighter: #E0E7FF;
@secondary: #3A0CA3;
@success: #10B981;
@warning: #F59E0B;
@danger: #EF4444;
@gray-100: #F3F4F6;
@gray-200: #E5E7EB;
@gray-300: #D1D5DB;
@gray-400: #9CA3AF;
@gray-500: #6B7280;
@gray-600: #4B5563;
@gray-700: #374151;
@gray-800: #1F2937;
@gray-900: #111827;

// 阴影
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

// 圆角
@radius-sm: 6px;
@radius-md: 8px;
@radius-lg: 12px;

// 过渡效果
@transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.bank-card {
  position: relative;
  background: white;
  border-radius: @radius-md;
  box-shadow: @shadow-sm;
  overflow: hidden;
  transition: @transition;
  cursor: pointer;
  height: 100%;
  border: 1px solid @gray-200;
  display: flex;
  flex-direction: column;

  &:hover {
    transform: translateY(-4px);
    box-shadow: @shadow-lg;
    border-color: @primary-light;

    .card-header .delete-icon {  
      opacity: 1 !important;     
    }

    .view-btn {
      background: @primary;
      color: white;

      i {
        transform: translateX(2px);
      }
    }
  }
  .difficulty {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
  }

  .difficulty-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;

    i {
      font-size: 0.65rem;
    }
  }
  .card-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, @primary, @secondary);
    opacity: 0.9;
    transition: @transition;
  }

  .card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    position: relative;

    .bank-info {
      flex: 1;
      min-width: 0;

      .bank-name {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: @gray-900;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .bank-description {
        margin: 8px 0 0;
        font-size: 14px;
        color: @gray-500;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2; /* 新增标准属性 */
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    .delete-icon {
      position: absolute;
      top: 0px;
      right: 5px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      color: @gray-500;
      opacity: 0;
      transition: @transition;
      z-index: 10;
      box-shadow: @shadow-sm;
      font-size: 12px;
      cursor: pointer;
      
      &:hover {
        background-color: @danger;
        color: white;
        transform: scale(1.1);
      }
    }
  }

  .card-stats {
    display: flex;
    gap: 20px;
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px dashed @gray-200;
    border-bottom: 1px dashed @gray-200;

    .stat {
      flex: 1;
      text-align: center;

      .stat-value {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 4px;
        transition: @transition;
      }

      .stat-label {
        font-size: 13px;
        color: @gray-500;
        letter-spacing: 0.5px;
      }
    }
  }

  .card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 40px;
    height: auto;

    .meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: @gray-500;
      white-space: nowrap;
      flex-shrink: 0;

      i {
        color: @gray-400;
        font-size: 12px;
      }
    }

    .view-btn {
      background: @gray-100;
      border: none;
      color: @primary;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 16px;
      border-radius: @radius-sm;
      cursor: pointer;
      transition: @transition;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      flex-shrink: 0;

      &:hover {
        background: @primary-lighter;
      }

      i {
        font-size: 12px;
        transition: @transition;
      }
    }
  }
}

// 响应式调整
@media (max-width: 480px) {
  .bank-card {
    .card-content {
      padding: 16px;
    }

    .card-header {
      .bank-name {
        font-size: 16px;
      }
    }

    .card-stats {
      gap: 12px;

      .stat-value {
        font-size: 20px;
      }
    }

    .card-footer {
      flex-wrap: wrap;
      gap: 8px;

      .meta-item {
        font-size: 12px;
      }

      .view-btn {
        padding: 6px 12px;
        font-size: 13px;
        margin-left: auto;
      }
    }
  }
}
</style>